import React, {useEffect, useState} from 'react'
import {Button, Upload, Row, Col, message, Modal} from 'antd'
import styles from './index.less'
import {downloadFileUrl} from '@/service/common/download'
// 图标
import {IconFont} from '@/utils/common/tool'

type PropsType = {
	title?: string // 弹框标题
	isModalOpen: boolean // 弹框是否可见
	setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>
	getListData: any // 导入成功刷新列表数据
	downloadUrl?: string // 下载模板url
	uploadFileUrl?: string // 上传模板url
}

const customImport = (props: PropsType) => {
	const {
		title = '批量导入',
		isModalOpen,
		setIsModalOpen,
		downloadUrl,
		uploadFileUrl,
		getListData,
	} = props
	const [show, setShow] = useState(true)

	const onCancel = () => {
		setIsModalOpen(false)
		setShow(true)
	}

	const uploadProps = {
		action: uploadFileUrl,
		name: 'excel',
		beforeUpload: (file: any) => {
			const isLt200M = file.size / 1024 / 1024 < 200
			if (!isLt200M) {
				message.error('文件必须小于200MB')
			}
			return isLt200M
		},
		onChange(info: any) {
			if (info.file.status === 'done') {
				setShow(false)
				setIsModalOpen(false)
				const text = `导入成功,成功${info?.file?.response?.data?.successCount}条，失败${info?.file?.response?.data?.failCount}条`
				message.success(text)
				getListData()
			}
			if (info.file.status === 'error') {
				setShow(false)
				message.error(info?.file?.response.msg)
			}
		},
		onDrop() {},
		onRemove(info: any) {
			setShow(true)
			message.success(`${info?.name}移除成功`)
		},
	}
	useEffect(() => {
		if (isModalOpen) {
			setShow(true)
		}
	}, [isModalOpen])

	return (
		<Modal
			title={title}
			open={isModalOpen}
			onCancel={onCancel}
			width={600}
			destroyOnClose
			footer={null}>
			<div className={styles.customImport}>
				<Row gutter={12}>
					<Col sm={{span: 24}}>
						<div className="stepBoxs">
							<div className="inlineImg">
								<IconFont type="icon-xiazai" />
							</div>
							<div className="inlineText">
								<div className="inlineContent">
									<div className="text title">
										下载文件模板、填写导入信息
									</div>
									<a
										href={`${downloadFileUrl}/${downloadUrl}`}>
										<Button
											type="primary"
											shape="round"
											size="small"
											className="downOrupload">
											下载模板
										</Button>
									</a>
								</div>
							</div>
						</div>
					</Col>
					<Col sm={{span: 24}}>
						<div className="stepBoxs">
							<div className="inlineImg">
								<IconFont type="icon-a-shangchuan1" />
							</div>
							<div className="inlineText">
								<div className="inlineContent">
									<div className="text title">
										上传导入模板
									</div>
									<div className="text">
										支持文件xls、xlsx（即Excel表格），文件大小不得超过200M，最大支持导入50万条数据
									</div>
								</div>

								<>
									<Upload {...uploadProps}>
										{!show ? (
											''
										) : (
											<Button
												type="primary"
												shape="round"
												size="small"
												className="downOrupload">
												上传文件
											</Button>
										)}
									</Upload>
								</>
							</div>
						</div>
					</Col>
				</Row>
			</div>
		</Modal>
	)
}
export default customImport
